<template>
  <el-pagination background layout="total, sizes, prev, pager, next, jumper" :page-sizes="[1, 20, 30, 50, 100, 200, 300, 400]" :page-size="pageSize" :current-page="currentPage" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    currentPage: {
      type: [String, Number],
      default: 1
    },
    pageSize: {
      type: [String, Number],
      default: 20
    },
    total: {
      type: [String, Number],
      default: 0
    }
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('size-change', val)
    },
    handleCurrentChange(val) {
      this.$emit('current-change', val)
    }
  }
}
</script>

<style scoped lang="scss">
  .el-pagination {
    padding: 10px 0 0 0;
  }
</style>
